<template>
    <div class="container">
        <h2 style="margin-left: 700px">我的商品</h2>
        <!-- 商品列表 -->
        <el-main>
            <el-row>
                <el-col :span="6" v-for="product in products" :key="product.id">
                    <el-card class="product-card">
                        <img :src="product.itemImg" class="product-image" alt="product.name">
                        <div class="product-info">
                            <span class="product-name">{{ product.itemName }}</span>
                            <span class="product-price">￥{{ product.price }}</span>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </el-main>

        <!-- 底部总计 -->
        <el-footer class="footer">
            <el-button type="primary" @click="addItem" style="margin-left: 700px">新建商品</el-button>
        </el-footer>

    </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import {getItemListByItemId} from "@/api/item";
import {useRoute} from "vue-router";
import {createOrder} from "@/api/order";
import {ElMessage} from "element-plus";
import {createLineItem} from "@/api/item";
import {findCustomerOrder} from "@/api/order";
import router from "@/router";
import {getItemByBusinessId} from "@/api/item";

const products = ref([]);
const itemIds=ref([])

const route=useRoute()


onMounted(async () => {
    let result=await getItemByBusinessId()
    itemIds.value=result.data
    let result2=await getItemListByItemId(itemIds.value)
    products.value=result2.data
})

function addItem(){
    window.open(`/addItem`, '_blank');
}






</script>

<style>
.container {
    padding: 20px;
}

.product-card {
    margin: 10px;
    position: relative;
}

.product-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.product-info {
    display: flex;
    justify-content: space-between;
    padding: 10px;
}

.product-name {
    font-size: 18px;
}

.product-price {
    font-size: 16px;
}

.product-actions {
    position: absolute;
    bottom: 5px;
    right: 10px;
}

.footer {
    display: flex;
    padding: 5px;
}
</style>
